import React from 'react';
import {connect} from 'react-redux';
const TodoListInfo=(props)=>{
    const {inputValue,list,handlerInputChange,handlerAddItem,delectedListItem} = props
    return(
        <div>
           <div>
            <input value={inputValue} onChange={handlerInputChange} placeholder="输入内容"/>
            <button onClick={handlerAddItem}>提交</button>
           </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (<li key={index} onClick={()=>{delectedListItem(index)}}>{item}</li>)
                    })
                }
            </ul>
        </div>
    )
}
//规则
const mapStateToProps =(state)=>{
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}
//改变数据
const mapDispatchToProps=(dispatch)=>{
    return {
        handlerInputChange(e){
            const action = {
                type:'change_input_value',
                value:e.target.value
            }
            dispatch(action);
        },
        handlerAddItem(){
            const action = {
                type:'add_list_item',
            }
            dispatch(action);
        },
        delectedListItem(index){
            const action={
                type:'delecte_list_item',
                value:index
            }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoListInfo);